import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import MyScroll from '../../components/MyScroll/MyScroll';
import {  Icon ,WingBlank,Button,Flex,List,SwipeAction,Toast} from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {addressList} from "./addressList.less";
import select1svg from '../../assets/img/select1.svg';
import select2svg from '../../assets/img/select2.svg';


class AddressList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            addressEntities:[]
        };
    }

    componentWillMount(){
        this.props.dispatch({type:"accountManagement/addressListEFF"})
    }

    render() {
        const {addressEntities=[]} = this.props.accountManagement;
        console.log(addressEntities)
        return (
            <Flex style={{
                height:"100%"
            }} direction="column"
                  className={addressList}
            >
                <NavTopBar title="管理收货地址" dispatch={this.props.dispatch}/>
                <MyScroll>
                    {
                        addressEntities.map((value,i)=>{
                            return <SwipeAction key={i} style={{backgroundColor: 'gray', width: "100%",marginBottom:".3rem"}} autoClose
                                                right={[
                                                    {
                                                        text: '删除',
                                                        onPress: () => {
                                                            this.props.dispatch({type:"accountManagement/delAddressEFF",obj:value.id}).then((r)=>{
                                                                if(r.code==200){
                                                                    Toast.success('删除成功', 1.5,()=>{
                                                                        this.props.dispatch({type:"accountManagement/addressListEFF"})
                                                                    });
                                                                }
                                                            })
                                                        },
                                                        style: {backgroundColor: '#ff0036', color: 'white'},
                                                    },
                                                ]} >
                            <div  style={{width:"100%",backgroundColor:"#fff"}}>
                                <WingBlank>
                                    <div style={{padding:".3rem 0",fontSize:".3rem"}}>
                                        <span>{value.trueName}</span>
                                        <span style={{marginLeft:".3rem"}}>{value.mobPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}</span>
                                    </div>
                                    <div style={{paddingBottom:".3rem",borderBottom:".01rem solid #999",fontSize:".3rem"}}>
                                        {value.address}
                                    </div>
                                    <Flex justify="between" style={{padding:".3rem 0"}}>
                                        <Flex>
                                            {
                                                value.isDefault==1?<Icon type={select1svg.id}/>:<Icon type={select2svg.id} onClick={()=>{
                                                    this.props.dispatch({type:"accountManagement/makeAddressEFF",obj:value.id}).then((r)=>{
                                                        if(r.code==200){
                                                            this.props.dispatch({type:"accountManagement/addressListEFF"});
                                                        }else{
                                                            Toast.fail(r.msg,1)
                                                        }
                                                    })

                                                }}/>
                                            }
                                            <span style={{marginLeft:".15rem"}}>默认地址</span>
                                        </Flex>
                                        <div onClick={()=>{
                                            let arr=[value.id,1];
                                            this.props.dispatch(routerRedux.push({
                                                pathname: `/editAddress/${value.id}`,
                                            }));
                                        }}>编辑</div>
                                    </Flex>
                                </WingBlank>

                            </div>
                            </SwipeAction>
                        })
                    }

                </MyScroll>
                <Button style={{width:"100%",backgroundColor:"#ff0036",color:"#fff",position:"fixed",bottom:"0"}} onClick={()=>{
                    this.props.dispatch(routerRedux.push({
                        pathname: `/editAddress/${" "}`,
                    }));
                }}>添加收货地址</Button>
            </Flex>
        );
    }
}


export default connect(({ accountManagement }) => ({ accountManagement }))(AddressList);